<extend name="Public/base" />
<block name="style">
<style>

.content{
  display: block;
  width:100%;
  margin-top: 15px;
  overflow: hidden;
   white-space: nowrap;
  text-overflow: ellipsis;
}
.content2{
  font-size: 20px;
  display: block;
  margin-top: 15px;
  width:100%;
  overflow: hidden;
   white-space: nowrap;
  text-overflow: ellipsis;
}
.coverLayout {
    position: fixed;
    left: 0px;
    top: 0px;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}
.groupImgContent img{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin:0 auto;

}
.pagePrev{
  cursor: pointer;
}
.pagePrev:hover{
    background-color: #e6e6e6 !important;
}
.pageNext{
  cursor: pointer;
}
.pageNext:hover{
    background-color: #e6e6e6 !important;
}
</style>
</block>
<block name="body">

<body>
  <div class="coverLayout">
    <div class="groupImgContainer" style="max-width:1200px;margin:0 auto">
      <div class="pagePrev" style="height:100%;width:50px;float:left;background: #fff">
        <
      </div>
      <div class="groupImgContent" style="float:left;width:1100px;display:table-cell;vertical-align:middle;text-align: center;background: #fff">
      
        
      </div>
      <div class="pageNext" style="height:100%;width:50px;float:right;background: #fff">
        >
      </div>
    </div>
  </div>
  
  
  <div class="head_wrap row">
    <div class="head_logo col-sm-4">
      <!-- <img src="__PUBLIC__/img/lunbo_02.jpg" alt=""> -->
      <h1>回忆是一种幸福</h1>
    </div>
    <div class="head_search col-sm-8">
      <div class="search_content row">
        <div class="col-xs-12 col-sm-8">
          <div class="input-group">
            <input type="text"  class="form-control search-query" placeholder="">
            <span class="input-group-btn">
              <button type="button" class="btn btn-purple btn-sm">
                搜索
                <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
              </button>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="center_wrap row">
    <div class="title">
      <p class="center_title">
        <span>最新图片</span>
        <a href="{:u('img_list',array('title'=>'news'))}" class="pull-right"> 更多>></a>
      </p>
    </div>
  <div id="gallery">
    <div class="container">
      <div class="row">
      <volist name="list" id="vo">
        <figure class="effect-chico">           
          <div class="col-md-3 wow fadeInUp" data-wow-offset="0" data-wow-delay="0.3s">
            <a href="__PUBLIC__/{$vo.url}" class="flipLightBox">
            <img src="__PUBLIC__/{$vo.thumb_url}" class="img-responsive" alt="" onerror="this.src='__PUBLIC__/img/moren.jpg'">
            </a>            
          </div>
        </figure>
        </volist>
      </div>
    </div>

  </div><!--/#gallery-->

    <div class="title">
      <p class="center_title">
        <span>组图图片</span>
        <a href="{:u('img_list',array('title'=>'zutu'))}" class="pull-right"> 更多>></a>
      </p>
    </div>
    <div class="col-sm-12">
      <div class="groupimg_content">
        <div class="row">

      <volist name="zutu" id ="vo">
            <div class="col-sm-4 col-md-4">
            <!-- <a href="{:u('zutu_list',array('zutu_id'=>$vo['zutu_id']))}" class="thumbnail"> -->
            <a href="#" class="groupImg thumbnail">
              <img src="__PUBLIC__/{$vo.thumb_url}" imgtitle="宋志来傻B" class="imgcss"  onerror="this.src='__PUBLIC__/img/moren.jpg'"alt="...">

                    <div class="caption">
                      <h3>{$vo.zutu_name}</h3>
                      <p class="content">{$vo.zutu_title}</p>
                    </div>
            </a>

          </div>
        </volist>
        </div>
      </div>
    </div>

<volist name="ctypelist" id="v">
<div class="title">
      <p class="center_title">
        <span>{$v.ctype_name}</span>
        <a href='{:U("img_list",array("title"=>$v["ctype_id"],"ctype_name"=>$v["ctype_name"]))}' class="pull-right"> 更多>></a>
      </p>
    </div>
    <div class="col-sm-12">
      <div class="groupimg_content">
        <div class="row">

      <volist name="v.list" id ="g">
            <div class="col-sm-4 col-md-3">
            <a href="#" class="thumbnail">
              <img src="__PUBLIC__/{$g.thumb_url}" imgtitle="周英秋傻B" class="imgcss" onerror="this.src='__PUBLIC__/img/moren.jpg'" alt="...">
                 <span style="position:absolute;left:0;top:140px;width:100%;height:30%;background:rgba(0,0,0,.3);display:none;text-align:center;margin-top:0px;color:#fff;font-size:15px;">
                  <p class="content2">{$g.title}</p>
                </span>
            </a>
          </div>
      </volist>
        </div>
      </div>
    </div>
</volist>
  </div>

</body>
</block>




<block name="script">
  <script>
  var indexActive;
    $(function(){
      
      $(".groupImg").bind("click", function(e){
        e.preventDefault();

        var arrHtml = [];
        arrHtml.push($(this)[0].innerHTML);
        var index = $(this).parent().siblings().find('.groupImg img');
        for(var i = 0; i < index.length; i++ ){
          arrHtml.push(index[i].parentElement.innerHTML);
        }
       // var arr = arrHtml;
       for(var j = 0 ; j < arrHtml.length; j++){
          $(".groupImgContent").append(arrHtml[j]);
       }
       // console.log(arrHtml.length);
        $(".coverLayout").css("display","block");
        debugger;
       $(".groupImgContent .caption").hide();   
       $(".groupImgContent img").hide();
       var imgIndex = $(".groupImgContent img");
       for(var k = 0 ; k < imgIndex.length; k++){
            $(".groupImgContent img").eq(k).attr("id","img"+k);
            // $(".groupImgContent caption").eq(k).attr("id","caption"+k);
       }
       $("#img0").fadeIn("fast");
       debugger;
       $("#img0").siblings(".caption").eq(0).show();
       indexActive = 0;
       // $(".groupImgContent img").eq(0).fadeIn("fast");

       var h = $(window).height();
       var h1 = $(".groupImgContent img").eq(0).height();
       var imgMargin = (h-h1)/2;
       $(".groupImgContent img").css("margin-top",imgMargin );
       $(".groupImgContainer").css("height",h);
       $(".groupImgContent").css("height",h);
      setPageBindEvent(imgIndex.length);

       // $(".groupImgContent a").eq(0).css("display","block");
        
       


      })
      function setPageBindEvent(l){
        $(".pagePrev").on('click',  function(event) {
          event.preventDefault();
          if(indexActive == 0){
            console.log("第一张，别点了");
          }else{
            indexActive = indexActive - 1;
            $(".groupImgContent img").hide(); 
            $(".groupImgContent .caption").hide(); 
            $("#img"+indexActive).fadeIn("fast");
            $("#img"+indexActive).siblings(".caption").eq(0).show();
          }
          setImgCenter(indexActive);
          
        });
        $(".pageNext").on('click',  function(event) {
          event.preventDefault();
          if(indexActive+1 == l){
            console.log("最后一张，别点了");
          }else{
            indexActive = indexActive + 1;
            $(".groupImgContent img").hide();
            $(".groupImgContent .caption").hide();  
            $("#img"+indexActive).fadeIn("fast");
            $("#img"+indexActive).siblings(".caption").eq(indexActive).show();
          }
          setImgCenter(indexActive);
          
        });
        // var sel = $("[id* = img]");
        $(".groupImgContent img").unbind('click').bind('click', function(event) {
          $(".coverLayout").css("display","none");
          $(".groupImgContent").empty();
        });
        
      }
      function setImgCenter(indexActive){
        
        var h1 = $("#img"+indexActive).height();
        var h = $(window).height();
        $(".groupImgContent img").css("margin-top",(h-h1)/2);
      }
     
     

      /*不知道为什么不起作用-----你之前写过这种函数*/
      $(window).on("rezize", function(){
      debugger;
        var h = $(window).height();
        $(".groupImgContainer").css("height",h);
        $(".groupImgContent").css("height",h);






      })




    })


  </script>

  



</block>




